import LazyLoad from 'react-lazyload';
import styled from 'styled-components'

export interface ImageViewProps {
  src: string,
  onClick?: () => void,
  alt?: string,
}

export const ImageView = ({ src, alt, ...rest }: ImageViewProps) => {
  return <ImageWrapper {...rest}>
    <LazyLoad {...rest}>
      {/* lazyload参数 */}
      <img src={src} alt={alt}/>
    </LazyLoad>
  </ImageWrapper>
}

ImageView.defaultProps = {
  width: '100px',
  height: '100px',
  round: true,
  alt: '提示文字'
}

export default ImageView;


const ImageWrapper:any = styled.div`
  width: ${(props:any) => props.width};
  height: ${(props:any) => props.height};
  .lazyload-wrapper  {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: ${(props:any) => props.round? '50%': ''};
    }
  }
`
